<template>
	<view style="padding: 30rpx;">
		<button @click="onSetTimeCall()">单词定时器setTimeout</button>
		<button @click="onSetTimeCallxy(userName,passward)">带参数setTimeout</button>
		<button @click="onSetTimeoutClear()" type="warn">取消定时器</button>
		<button @click="onInteral()" type="primary">周期打印</button>
		<button @click="onClearInter()" type="warn" plain="true">取消周期打印</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:'zlx',
				passward:'666',
				timeoutID:null,
				count:0,
				interalID:null
			}
		},
		methods: {
			onSetTimeCall(){
				console.log("onSetTimeCall -->");
				//setTimeout(callback,ms,ayn[])
				//箭头函数（匿名函数）()=>{   }
				this.timeoutId = setTimeout(()=>{
					//延时之后要执行的代码 2000ms=2s
					console.log("我延时3s才会打印");
				},3000)
			},
			onSetTimeCallxy(name,pwd)
			{
				console.log("onSetTimeCallxy --> name:" + name +",pwd:" +pwd);
				//console.log("onSetTimeCallxy --> name:" + this.userName +",pwd:" +this.pwd);
				setTimeout((x,y)=>{
					console.log("我可以传参数了 > x:" +x+",y:"+y);
				}, 2000, name, pwd)
			},
			onSetTimeoutClear()
			{
				clearTimeout("onTimeoutClear ------->定时器被我取消了:" + this.timeoutID);
				clearTimeout(this.timeoutID);
			},
				
			onInteral(){
				this.interalID = setInterval(()=>{
					this.count++;
					console.log("周期打印 count:" ,this.count);
				},1000)
				
			},
			onClearInter()
			{
				console.log("onClearInter:",this.interalID);
				clearInterval(this.interalID)
			}
		}
	}
</script>

<style>
button{
	margin: 30rpx;
}
</style>
